<template>
  <!-- 企业可视化首页 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>企业数据看板</p>
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-row :gutter="15">
        <el-col :span="6">
          <el-row :gutter="10" class="project-show marginT35">
            <el-col :span="12">
              <div class="item" @click="goProject()">
                <p>{{ proNumAndMoney.proCount || 0 }}(个)</p>
                <p>施工中项目数</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item" @click="goProject()">
                <p>{{ proNumAndMoney.proContractAmount || 0 }}(万元)</p>
                <p>施工中项目合同额</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item" @click="goProject()">
                <p>{{ proNumAndMoney.allProCount || 0 }}(个)</p>
                <p>项目总数</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item" @click="goProject()">
                <p>{{ proNumAndMoney.allProContractAmount || 0 }}(万元)</p>
                <p>项目总合同额</p>
              </div>
            </el-col>
          </el-row>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>不同类型的项目统计</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="12">
                <EchartsPie
                  height="220px"
                  :data="[...landTypeData]"
                  :legend="[...landLegend]"
                />
              </el-col>
              <el-col :span="12">
                <EchartsPie
                  height="220px"
                  :data="[...proTypeData]"
                  :legend="[...typeLegend]"
                />
              </el-col>
            </el-row>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>项目产值TOP5</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EcharsBarX height="239px" :pro-list="[...proValueList]" :value-price-list="[...valuePriceList]" />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>人员参与项目排名TOP5</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EcharsBarX y-axis-name="人员名称" x-axis-name="项目个数" height="239px" :pro-list="[...userNameList]" :value-price-list="[...userAmountList]" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="map">
            <div class="bar-img" />
            <h3 class="title">项目分布</h3>
            <div class="cont">
<!--              <EcharsMap :points="centerXY" height="560px" />-->
              <Amap :points="centerXY" height="560px" />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>施工中的项目</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <ProjectTable :limit-move-num="13" :list-data="InglistData" :list-header="InglistHeader" height="300px" />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="bar marginT35">
            <div class="bar-img" />
            <h3 class="title">
              <span>人员统计</span>
              <span class="more" @click="goPersonal()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <el-row :gutter="10" class="project-show">
                <el-col :span="12">
                  <div class="item" @click="goPersonal()">
                    <p>{{ personCount.registerCount }}(人)</p>
                    <p>人员总数</p>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="item" @click="goPersonal()">
                    <p>{{ personCount.proUserCount }}(人)</p>
                    <p>施工中人员数</p>
                  </div>
                </el-col>
              </el-row>
              <EchartsTwoBar
                height="200px"
                :name-list="nameList"
                :enrollment-list="enrollmentList"
                :user-count-list="userCountList"
                x-axis-name="人员类型"
              />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>设备统计</span>
              <span class="more" @click="goEquipment()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <el-row :gutter="10" class="project-show">
                <el-col :span="12">
                  <div class="item" @click="goEquipment()">
                    <p>{{ equipmentSize.ownEquipment }}(台)</p>
                    <p>自有设备</p>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="item" @click="goEquipment()">
                    <p>{{ equipmentSize.leaseEquipment }}(台)</p>
                    <p>租赁设备</p>
                  </div>
                </el-col>
              </el-row>
              <EchartsOneBar height="200px" :count-exploration="[...countExploration]" x-axis-name="设备类型" />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>被抽查的项目</span>
              <span class="more" @click="goCheckProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <ProjectTable :limit-move-num="9" :pro-grade="proGrade" height="230px" :list-data="checkListData" :list-header="checklistHeader" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { enterpriseAnalysis } from '@/api/home'
import EchartsTwoBar from '@/components/EchartsComponents/EchartsTwoBar'
import EchartsOneBar from '@/components/EchartsComponents/EchartsOneBar'
import EcharsBarX from '@/components/EchartsComponents/EcharsBarX'
// import EcharsMap from '@/components/EchartsComponents/EcharsMap'
/** 高德地图 start*/
import Amap from '@/components/EchartsComponents/Amap'
/** 高德地图 end*/
import EchartsPie from '@/components/EchartsComponents/EchartsPie'
import ProjectTable from './components/ProjectTable'
export default {
  name: 'EnterpriseIndex',
  components: {
    EchartsTwoBar,
    EchartsOneBar,
    EcharsBarX,
    Amap,
    // EcharsMap,
    ProjectTable,
    EchartsPie
  },
  data() {
    return {
      // 人员统计
      enrollmentList: [],
      nameList: [],
      userCountList: [],
      // 人员Top 10
      userAmountList: [],
      userNameList: [],
      // 项目产值Top 10
      valuePriceList: [],
      proValueList: [],
      // 4个btn数据
      proNumAndMoney: {
        proCount: 0,
        proContractAmount: 0,
        allProCount: 0,
        allProContractAmount: 0
      },
      // 被抽查的项目
      checkListData: [], // 表格数据
      checklistHeader: [ // 表头
        { name: '项目名称' },
        { name: '项目等级' },
        { name: '总合同额(万元)' }
      ],
      personCount: {
        proUserCount: 0,
        registerCount: 0
      },
      // 设备图形
      countExploration: [],
      // 设备数量
      equipmentSize: {
        ownEquipment: 0,
        leaseEquipment: 0
      },
      // 项目类型饼形图
      typeLegend: ['无'],
      proTypeData: [{ name: '无', value: 0, proportion: 0, price: 0 }],
      // 地区饼形图
      landLegend: ['无'],
      landTypeData: [{ name: '无', value: 0, proportion: 0, price: 0 }],
      // 施工项目
      centerXY: [], // 地图坐标点及数据
      InglistData: [], // 表格数据
      InglistHeader: [ // 表头
        { name: '项目名称' },
        { name: '钻孔总数' },
        { name: '已完成钻孔' },
        { name: '未完成钻孔' },
        { name: '总合同额(万元)' }
      ]
    }
  },
  computed: {
    ...mapState({ proGrade: state => state.basicInfo.proGrade })
  },
  mounted() {
    this.getEnterpriseData()
  },
  methods: {
    // 获取图形表格数据
    async getEnterpriseData() {
      const { data: {
        proInfoSuperviseVoListByRegion,
        proInfoSuperviseVoListByProTypeId,
        proNumAndMoney,
        workInfo,
        proInfoByCheck,
        proInfoByAmountTop10,
        equipmentSize,
        proUserVo,
        personCount,
        person: { enrollments, proUserVoByTypeName },
        equipment: { countExploration }
      }} = await enterpriseAnalysis()
      this.personCount = personCount
      this.centerXY = workInfo.map(item => {
        const { proNum, proName, workload, finishWorkload } = item
        return { lon: item.x, lat: item.y, proNum, proName, workload, finishWorkload }
      })
      // 人员统计
      enrollments.forEach(item => {
        this.enrollmentList.push(item.enrollment)
        this.nameList.push(item.sysUserType)
      })
      proUserVoByTypeName.forEach(item => {
        this.userCountList.push(item.userCount)
      })
      // 人员项目Top 10
      proUserVo.splice(0, 5).forEach(item => {
        this.userAmountList.push(item.userAmount)
        this.userNameList.push(item.userName)
      })
      // 项目产值Top 5
      proInfoByAmountTop10.splice(0, 5).forEach(item => {
        this.valuePriceList.push(item.contractAmount)
        this.proValueList.push(item.proNum)
      })
      // 设备图形/统计设备数
      this.equipmentSize = equipmentSize
      this.countExploration = countExploration
      // 被抽查项目表格
      this.checkListData = proInfoByCheck
      // 施工项目表格
      this.InglistData = workInfo
      // 4个btn统计总数
      // this.proNumAndMoney = proNumAndMoney
      this.proNumAndMoney = {
        proCount: proNumAndMoney.proCount,
        proContractAmount: this.divideMoney(proNumAndMoney.proContractAmount, 6, true),
        allProCount: proNumAndMoney.allProCount,
        allProContractAmount: this.divideMoney(proNumAndMoney.allProContractAmount, 6, true)
      }
      // 区县饼形图
      this.proTypeData = proInfoSuperviseVoListByProTypeId.map(item => {
        const { proNum, proportion, regionTypeName, totalAmount } = item
        this.typeLegend.push(regionTypeName)
        return { name: regionTypeName, value: proNum, proportion, price: this.divideMoney(totalAmount, 6, true) }
      })
      // 地区饼形图
      this.landTypeData = proInfoSuperviseVoListByRegion.map(item => {
        const { proNum, proportion, regionTypeName, totalAmount } = item
        this.landLegend.push(regionTypeName)
        return { name: regionTypeName, value: proNum, proportion, price: this.divideMoney(totalAmount, 6, true) }
      })
    },
    goSecondPage() {
      this.$router.push({
        path: '/secondPage'
      })
    },
    goProject() {
      this.$router.push({
        path: '/statisticalAnalysis/project'
      })
    },
    goPersonal() {
      this.$router.push({
        path: '/resourceManage/user'
      })
    },
    goEquipment() {
      this.$router.push({
        path: '/resourceManage/equipment'
      })
    },
    goCheckProject() {
      this.$router.push({
        path: '/statisticalAnalysis/project'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>
